import React, { Component } from 'react';
import './customTab.less';

class CustomTab extends Component{

	constructor(props) {
	    super(props);
	    this.state = {
	    	tabSize: this.props.tabs.length,
	    	tabClass: this.props.tabClass
	    }
	}

	//选中tab
	tabHandle = (index) => {
		const tabAverage = parseFloat(100)/parseFloat(this.state.tabSize);
		const tabLeft = index*tabAverage;
		document.getElementsByClassName(this.props.tabClass)[0].style.left = tabLeft+"%";
		this.props.tabHandle(index);
	}

	render(){
		return(
			<div className="customTab">
				<ul >  
					{
						this.props.tabs.map((item, index) => {
							return(
								<li key={index} onClick={() => this.tabHandle(index)}><span>{item}</span></li>  
							)
						})
					}
	                <li className={this.state.tabClass} style={{left: '0'}}></li>  
	            </ul>  
            </div>
		)
	}
}

export default CustomTab;